<template>
  <div class="basic-copy">
    <span
      class="truncate basic-copy_text"
      :class="isHover ? 'hover:text-[#1D2129]' : ''"
    >
      {{ text || '-' }}
    </span>
    <app-icon
      v-if="text && isCopy"
      name="copy"
      :size="size"
      color="#BFC2C7"
      class="flex-shrink-0 cursor-pointer copy-icon hover:text-[#1D2129]"
      @click.stop="copy(text)"
    ></app-icon>
  </div>
</template>

<script setup lang="ts">
interface IProps {
  text: string
  size?: string
  isHover?: boolean
  isCopy?: boolean
}
withDefaults(defineProps<IProps>(), {
  text: '',
  size: '14px',
  isHover: true,
  isCopy: true
})
</script>

<style scoped lang="scss">
.basic-copy {
  @apply flex items-center gap-x-1;
  &_text {
    @apply max-w-full overflow-hidden cursor-pointer text-[#2D2E33]   text-ellipsis;
  }
}
</style>
